<!-- Dom模板 -->
<template>
  <div class="swipers" >
    <!-- Dom内容 -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in bannerList" :key="index" >
        <p>{{item}}</p>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      bannerList: [
        "Tlps：饮食无大小，疫情防控请大家认真对待!",
        "团餐小助手：众志成城，齐心协力防控疫情。",
        "团餐小助手：科学防控疫情，文明实践随行。",
        "少出门，不信谣,测体温,戴口罩,定时开窗通风"
      ],
      swiperOptions: {
        direction: "vertical",
        loop: true, // 环路翻滚
        autoplay: {
          delay: 5000, // 延时
          stopOnLastSlide: false, // 最后一个slide时是否继续轮播
          disableOnInteraction: false, // 点击小点是否终止自动轮播
        },
        // Some Swiper option/callback...
      },
    }; 
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
  },
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.swipers {
  width: 98%;
  height: 20px;
  margin-left: 1%;
  border-radius: 10px;
}

.swipers .swiper-wrapper p {
  display: block;
  width: 100%;
  height: 20px;
  font-size: 15px;
}
.swiper-slide{
  height: 50px;
}
</style>